<template>
	<view class="white-container" :class="[$store.state.AppTheme]">
		<!-- {{$store.state.player.play_list}} -->
		<!-- 引入顶部导航组件 -->
		<my-topMenu :showWhat="showWhat" @goWhat="goWhat"></my-topMenu>
		<!-- 展示首页 -->
		<view v-if="showWhat=='index'" class="white-box">
			<my-index @playOne="playOne"  @playList="playList"  @goListDetail="goListDetail" />
		</view>
		<!-- 展示乐器曲库页面 -->
		<view v-if="showWhat=='quku'" class="white-box">
			<my-category @playOne="playOne" @goMusicDetail="goMusicDetail" />
		</view>
		<!-- 展示我的音乐页面 -->
		<view v-if="showWhat=='mymusic'" class="white-box">
			<my-music @goWhat="goWhat" @playOne="playOne" @goMusicDetail="goMusicDetail" />
		</view>
		<!-- 展示歌单风格页面 -->
		<view v-if="showWhat=='songlist'" class="white-box">
			<my-songlist @playOne="playOne" @playList="playList"  @goListDetail="goListDetail" @goMusicDetail="goMusicDetail" />
		</view>
		<!-- 显示单个歌单detail页面 -->
		<view v-if="showWhat=='songlistDetail'" class="white-box">
			<my-SonglistDetail :SonglistDetailId="SonglistDetailId" @playOne="playOne" @playList="playList" />
		</view>
		<!-- 歌手页面 -->
		<view v-if="showWhat=='artist'" class="white-box">
			<my-artist @playOne="playOne" @goMusicDetail="goMusicDetail" />
		</view>
		<!-- 显示单个音乐detail页面 -->
		<view v-if="showWhat=='detail'" class="white-box">
			<my-music-detail :detailId="detailId" @playOne="playOne"></my-music-detail>
		</view>
		<!-- 显示用户页面 -->
		<view v-if="showWhat=='user'" class="white-box">
			<my-user />
		</view>
		<!-- 显示过渡页 -->
		<view v-if="showWhat=='loading'" class="white-box">
			<my-loading />
		</view>
		<!-- 引入固定底部的音乐播放器 -->
		<my-player ref="player" />
		<!-- 引入底部导航组件 -->
		<my-footer />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appTheme: '',
				showWhat: 'index', //显示组件标识songlist  index
				detailId: '', //显示歌曲详情的id
				SonglistDetailId: '', //显示歌单详情的id
			}
		},
		// 不推荐、用户体验不好
		watch: {
			// '$route' (to, from) {
			//    // 路由发生变化页面刷新
			// this.$router.go(0);
			// 	}
		},
		onLoad() {
			this.$A.checkToken()
			this.appTheme = uni.getStorageSync('AppTheme') || this.$store.state.AppTheme
			if (Object.keys(this.$route.query).length > 0) {
				const [myroute] = Object.keys(this.$route.query)
				console.log(myroute)
				this.showWhat = myroute
			}
			if (this.$route.query.song) {
				this.showWhat = "detail"
				this.detailId = this.$route.query.song
			}

		},
		methods: {
			goWhat(e) { //显示不同的页面
				this.showWhat = e
			},
			goMusicDetail(e) { //显示歌曲详情页
				this.showWhat = "detail"
				this.detailId = e.id
			},
			goListDetail(e) { //显示歌单详情页
				this.showWhat = "songlistDetail"
				this.SonglistDetailId = e.id
				// console.log(this.SonglistDetailId)
			},
			playOne(data) { //单曲播放
				this.$refs.player.playOne(data)
			},
			playList(data) { //播放歌单列表音乐
				console.log('playList')
				this.$refs.player.playList(data)
			}
		}
	}
</script>

<style>

</style>
